<template>
	<view class="container" v-if="info">
		<view class="header flex flex-ai-c">
			<view class="header-left">
        <i-icon :icon="statusIcon[info.status]" type="single" size="34rpx" color="#333"></i-icon>
				<text class="header-left-text">{{ status[info.status] }}</text>
			</view>
		</view>

    <!-- 物流信息 -->
    <view class="boxS logistics" v-if="info.status === 10">
      <view class="logistics-head">录入物流信息</view>
      <view class="boxS-content">
        <view class="content-item">
          <view class="content-item-left">快递公司：</view>
          <view class="content-item-right">
            <u-input v-model="logisticsCompany" type="select" :select-open="showPopup" @click="showPopup = true" placeholder="请选择快递公司" height="26" :custom-style="logisticsInput"/>
          </view>
        </view>
        <view class="content-item">
          <view class="content-item-left">快递单号:</view>
          <view class="content-item-right ">
            <u-input v-model="logisticsNo" type="text" placeholder="请输入快递单号" maxlength="30" height="26" :custom-style="logisticsInput"/>
          </view>
        </view>
      </view>
    </view>
    <view class="boxS logistics" v-else-if="info.status !== 0 && info.status !== 5">
      <view class="logistics-head">物流信息</view>
      <view class="boxS-content">
        <view class="content-item">
          <view class="content-item-left">快递公司：</view>
          <view class="content-item-right ">{{ info.logistics_company_name }}</view>
        </view>
        <view class="content-item">
          <view class="content-item-left">快递单号:</view>
          <view class="content-item-right ">{{ info.logistics_no }}</view>
        </view>
      </view>
    </view>

		<!-- 车型模块 -->
		<view class="carMolde boxS">
      <view class="boxS-content">
        <view class="content-item" :class="info.vin? '': 'b-b'">
          <view class="content-item-left">车型:</view>
          <view class="content-item-right shuanghang">{{ info.car_name }}</view>
        </view>
        <view class="content-item b-b" v-if="info.vin">
          <view class="content-item-left">VIN:</view>
          <view class="content-item-right">{{ info.vin }}</view>
        </view>
        <view class="xian"></view>
        <view class="content-item">
          <view class="content-item-left">询价主体:</view>
          <view class="content-item-right flex flex-ai-c">
            <text class="store">{{ info.store_buy_name }}</text>
            <i-icon class="icon-store" icon="iconmendianrenzheng" type="single" size="32rpx" color="#60C534"></i-icon>
            <i-icon v-if="" class="icon-store" icon="iconbao_1" type="single" size="28rpx" color="#FBB000"></i-icon>
          </view>
        </view>
        <view class="content-item">
          <view class="content-item-left">联系人:</view>
          <view class="content-item-right">{{  info.buy_name }}</view>
        </view>
        <view class="content-item">
          <view class="content-item-left">联系电话:</view>
          <view class="content-item-right">{{ info.buy_phone }}</view>
        </view>
        <view class="content-item">
          <view class="content-item-left">收货地址:</view>
          <view class="content-item-right">{{ info.buy_address }}</view>
        </view>
        <view class="content-item">
          <view class="content-item-left">询价时间:</view>
          <view class="content-item-right">{{ dateFormat(info.question_time) }}</view>
        </view>
        <view class="content-item">
          <view class="content-item-left">有效期:</view>
          <view class="content-item-right">{{ dateFormat(info.effective_time) }}</view>
          <view class="content-item-tip">{{ remainder }}</view>
        </view>
      </view>
		</view>

		<!-- 询价清单 -->
		<view class="enMolder-item boxS" v-for="(item, index) in info.snapshootlist" :key="index">
      <view class="head" v-if="index === 0 ">报价清单</view>
			<view class="enMolder1 flex-jc-sb flex-ai-c">
				<view class="en-left flex flex-ai-c">
					<view class="en-left-num">
            <view class="en-num">{{ index + 1 }}</view>
          </view>
					<view class="en-name">{{ item.parts_name }}</view>
				</view>
				<view class="en-right en-num">x{{ item.count }}</view>
			</view>
			<view class="enMolderImg" v-if="item.images">
        <image v-for="(img,i) in handleImg(item.images)" :src="img" :key="i"></image>
			</view>
      <view class="enMolder3">
        <view class="en-left">说明:</view>
        <view class="en-right text-line2">{{ item.explain_text }}</view>
      </view>
			<view class="enMolder2 enMolder2-icon">
				<view class="en-left">品质:</view>
				<view class="en-right text-right">{{ quality[item.quality] }}</view>
			</view>
      <view class="enMolder2">
        <view class="en-left">我的报价:</view>
        <view class="en-right text-right price">{{ item.price }}元</view>
      </view>
      <view class="enMolder2">
        <view class="en-left">我的备注:</view>
        <view class="en-right">{{ item.remarks }}</view>
      </view>
		</view>


		<!-- 其他信息 -->
    <view class="boxS">
      <view class="boxS-head">其他信息</view>
      <view class="boxS-content">
        <view class="content-item">
          <view class="content-item-left">报价人:</view>
          <view class="content-item-right">{{ userName }} {{ userPhone }}</view>
        </view>
        <view class="content-item">
          <view class="content-item-left">运费价格:</view>
          <view class="content-item-right price">￥{{ info.freight }}</view>
        </view>
        <view class="content-item">
          <view class="content-item-left">发票:</view>
          <view class="content-item-right">{{ info.is_need_invoice ? '需要发票' : '不需发票' }}</view>
        </view>
        <view class="content-item">
          <view class="content-item-left">报价截止:</view>
          <view class="content-item-right">{{ dateFormat(info.snapshootlist[0].effective_time_offer) }}</view>
          <view class="content-item-tip">{{remainderQuote }}</view>
        </view>
      </view>
    </view>

		<!-- 订单信息 -->
		<view class="boxS">
			<view class="boxS-head">
				订单信息
			</view>
      <view class="boxS-content">
        <view class="content-item">
          <view class="content-item-left">订单编号：</view>
          <view class="content-item-right " @click="copy(info.order_no)">
            <text>{{ info.order_no }}</text>
            <text class="copy">复制</text>
          </view>
        </view>
        <view class="content-item">
          <view class="content-item-left">订单总价：</view>
          <view class="content-item-right price">￥{{ info.total_money }}</view>
        </view>
        <view class="content-item">
          <view class="content-item-left">报价时间：</view>
          <view class="content-item-right">{{ dateFormat(info.offer_time) }}</view>
        </view>
        <view class="content-item" v-if="info.status !== 0 && info.status !== 5">
          <view class="content-item-left">付款时间：</view>
          <view class="content-item-right">{{ dateFormat(info.pay_time) }}</view>
        </view>
				<view class="content-item" v-if="info.status === 5">
				  <view class="content-item-left">取消时间：</view>
				  <view class="content-item-right">{{ dateFormat(info.cancel_time) }}</view>
				</view>
        <view class="content-item" v-if="info.status === 20 || info.status === 30">
          <view class="content-item-left">发货时间：</view>
          <view class="content-item-right">{{ dateFormat(info.depart_time) }}</view>
        </view>
        <view class="content-item" v-if="info.status === 30">
          <view class="content-item-left">成交时间：</view>
          <view class="content-item-right">{{ dateFormat(info.accomplish_time) }}</view>
        </view>
      </view>

		</view>

		<view class="brows-box boxS flex flex-ai-c" @click="quoteMember">
			<view class="brows">
				<text class="num">{{ info.browse_number }}次</text>浏览/<text class="num">{{ info.quote_number }}人</text>参与报价
			</view>
			<view>
				<image class="brows-img" v-for="(img,i) in info.head_portrait" :src="img" :key="i"></image>
			</view>
      <u-icon name="arrow-right" color="#999" size="24rpx"></u-icon>
    </view>
    <view class="recommend" v-show="showRecommend">
      <view class="recommend-title">继续报价</view>
      <list-card v-for="(item, index) in recommendList" :key="index" :info="item"></list-card>
    </view>

<!--按钮-->
    <view class="btn-wrap flex" v-if="info.status === 0">
      <view class="btn btn-left flex flex-dir-c flex-jc-c flex-ai-c" @click="handleOrder('cancel')">
        <i-icon icon="iconshanchu1" type="single" size="34rpx" color="#FFE23E"></i-icon>
        <text>取消订单</text>
      </view>
      <view class="btn btn-center flex flex-dir-c flex-jc-c flex-ai-c" @click="chat">
        <i-icon icon="iconxiaoxi" type="single" size="34rpx" color="#FFE23E"></i-icon>
        <text>联系买家</text>
      </view>
      <button class="btn-right" @click="call">
        <i-icon icon="iconlianxi" type="single" size="32rpx" color="#333"></i-icon>
        <text class="btn-right-text">致电买家</text>
      </button>
    </view>
    <view class="btn-wrap flex" v-else-if="info.status === 10">
      <button class="cancel-left" @click="chat">
        <i-icon icon="iconxiaoxi" type="single" size="32rpx" color="#FFE23E"></i-icon>
        <text class="btn-left-text">联系买家</text>
      </button>
      <button class="btn-right" @click="handleOrder('getGoods')">
        <i-icon icon="iconwuliu" type="single" size="30rpx" color="#333"></i-icon>
        <text class="btn-right-text">确认物流信息</text>
      </button>
    </view>
    <view class="btn-wrap flex" v-else-if="info.status === 20 || info.status === 5">
      <button class="cancel-left" @click="chat">
        <i-icon icon="iconxiaoxi" type="single" size="32rpx" color="#FFE23E"></i-icon>
        <text class="btn-left-text">联系买家</text>
      </button>
      <button class="btn-right" @click="call">
        <i-icon icon="iconlianxi" type="single" size="32rpx" color="#333"></i-icon>
        <text class="btn-right-text">致电买家</text>
      </button>
    </view>
    <view class="btn-wrap flex" v-else-if="info.status === 30">
      <view class="btn btn-left flex flex-dir-c flex-jc-c flex-ai-c" @click="handleOrder('del')">
        <i-icon icon="iconshanchu" type="single" size="34rpx" color="#FFE23E"></i-icon>
        <text>删除订单</text>
      </view>
      <view class="btn btn-center flex flex-dir-c flex-jc-c flex-ai-c" @click="chat">
        <i-icon icon="iconxiaoxi" type="single" size="34rpx" color="#FFE23E"></i-icon>
        <text>联系买家</text>
      </view>
      <button class="btn-right" @click="call">
        <i-icon icon="iconlianxi" type="single" size="32rpx" color="#333"></i-icon>
        <text class="btn-right-text">致电买家</text>
      </button>
    </view>

<!--物流选择器-->
		<u-popup v-model="showPopup" mode="bottom" border-radius="30" length="50%">
			<view class="pop-title">物流公司</view>
			<view class="pop-two" >
				<view class="pop-two-i" @click="expressXuan = 1" :class="expressXuan === 1 ? 'pactive' : ''">
          <i-icon v-show="expressXuan === 1" icon="icondanxuan" type="single" size="32rpx" color="#FBB000"></i-icon>
          <i-icon v-show="expressXuan === 2" icon="icontuoyuan" type="single" size="32rpx" color="#999"></i-icon>
					<text>物流公司</text>
				</view>
				<view class="pop-two-i" @click="expressXuan = 2" :class="expressXuan === 2 ? 'pactive' : ''">
          <i-icon v-show="expressXuan === 2" icon="icondanxuan" type="single" size="32rpx" color="#FBB000"></i-icon>
          <i-icon v-show="expressXuan === 1" icon="icontuoyuan" type="single" size="32rpx" color="#999"></i-icon>
          <text>快递公司</text>
				</view>
			</view>
			<scroll-view scroll-y v-show="expressXuan == 1" style="height: 472rpx;">
				<view class="pop-item" v-for="item in expressData.logisticsArr" :key="item.name" @click="selExpress(item)">{{item.name}}</view>
			</scroll-view>
			<scroll-view scroll-y v-show="expressXuan == 2" style="height: 472rpx;">
				<view class="pop-item" v-for="item in expressData.expressArr" :key="item.name" @click="selExpress(item)">{{item.name}}</view>
			</scroll-view>
			<!-- <template v-show="expressXuan == 2">
				<view class="pop-item" v-for="item in expressData.expressArr" :key="item.name">{{item.name}}</view>
			</template> -->
		</u-popup>

<!--弹窗-->
    <u-modal title='温馨提示' v-model="popup.show" class="popup" width="65%" :mask-close-able="true" :title-style="{fontWeight:'bold',fontSize:'36rpx',color: '#333333'}"
             :show-confirm-button="false">
      <view class="slot-content">
        {{popup.title}}
      </view>
      <view class="woxiangxbox">
        <button class="slot-contentbutto2"  @click="popup.show = false" form-type="reset">取  消</button>
        <button class="slot-contentbutto" @click="popupFn" form-type="reset">{{popup.btnText}}</button>
      </view>
    </u-modal>
	</view>
</template>

<script src="./quoteOrderDetail.js"></script>
<style lang="scss" src="./quoteOrderDetail.scss"></style>
